<template>
	<view class="box-order-show-index" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:statusBar+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">盲箱订单</view>
		</view>
		<view class="navigation-position"></view>
		<view class="order-content"  v-if="order.level">
			<view class="gx-en">CONGRATULATIONS</view>
			<view class="gx-cn">恭喜您开得</view>
			<view class="order-image" :style="[{borderColor:color}]">
				<image :src="cover" class="cover"></image>
				<view  class="level-name">{{order.level.name}}</view>
				<image :src="order.product.cover_url" class="product_cover"></image>
			</view>
			<view class="product_price">¥{{order.product.price_market}}</view>
			<view class="product_title">{{order.product.title}}</view>
			<view class="level-btn">
				<view class="refresh-btn-show" @click="refresh()" v-if="refreshBtnShow==true">重抽({{refreshCount}})</view>
				<view class="refresh-btn"  v-else >重抽</view>
				<view class="confirm-btn" @click="confirm()">确定</view>
				<view class="djs-btn" v-if="refreshBtnShow">({{countTime}})</view>
			</view>
			<view class="refresh-explain">
				<view class="refresh-explain-item">
					<image src="/static/images/refresh-icon.png"  mode=""></image>
					<view @click="openRefreshPanel">重抽说明</view>
				</view>
			</view>
		</view>
		<uni-popup ref="refreshpopup" type="center" >
			<view class="pppup-content">
				<view class="content">
					<view class="refresh-top">重抽说明</view>
					<view class="refresh-popup-desc">使用重抽卡会放弃当前开得奖励 并重新抽取新的奖励</view>
					
					<view class="refresh-submit">
						<view class="refresh-submit-button" plain="true" @click="refresh()" v-if="refreshBtnShow==true">确定使用</view>
						<view class="refresh-submit-desc-button" plain="true" v-else >确定使用</view>
					</view>
					<view class="refresh-bottom">每次使用重抽会消耗重抽卡*1</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
  
<script>
import store from 'store'
import { mapGetters, mapActions } from 'vuex'
import { getBoxOrder,refreshBoxOrder,takeBoxOrder} from "api/boxApi.js";
export default { 
	name: "refresh",
	store,
	data() {
		return {
		  order_id:0,
		  order:[],
		  color:'#7859A2',
		  cover:'',
		  refreshBtnShow:true,
		  refreshCount:0,
		  countTime:null,
		  showCount:true
		  
		}
	},
	computed: {
		...mapGetters([
				'statusBar'
		])
	},
	methods: {
		 
		setCountTime(time) {
			let count = setInterval(() => {
				time = time - 1
				this.countTime = time
				console.log(this.countTime);  
				if (this.countTime == 0) {
					this.refreshBtnShow = false
					this.countTime = null
					clearInterval(count)
				}
			}, 1000)
		},
		async loadBoxOrder() {
		  const response = await getBoxOrder(this.order_id) 
		  const order = response;
		  
		  if(order.order){
			  
			  uni.redirectTo({
			  	url: `/packs/pages/order/show?id=${order.order.id}`
			  })
		  }
				
		  this.order = order;
		  this.cover = order.level.cover;
		  this.color = order.level.background_color;
		  if(this.order.is_refresh || this.order.is_taken){
			  this.refreshBtnShow = false
		  }else{
			  this.setCountTime(60);
		  }
		 
		},
		async openRefreshPanel() {
			if(this.source == 'wap'){
				if (await this.isLogin) {
					// uni.navigateTo({url: '/packs/pages/download/download'})
					
					// 创建订单底部弹框
					this.$refs.refreshpopup.open('center')
					
				}
			}else{
				this.$refs.refreshpopup.open('center')
			}
		},
		async confirm(){
			
			const getOrder = await getBoxOrder(this.order_id)
			
			if(getOrder.order){
			  uni.redirectTo({
				url: `/packs/pages/order/show?id=${getOrder.order.id}`
			  })
			}
			
			 let param = {
			 	blind_box_order_id:this.order_id,
				address_id:this.order.address_id,
			 };
			 let response = await takeBoxOrder(param); 
			 if(!response.message){
			 	uni.showModal({
			 		title: '提示',
			 		content: '生成订单',
			 		showCancel: false,
			 		success: async (res) => {
			 			this.loadBoxOrder();
			 		}
			 	})
			 	
			 }else{
			 	uni.showModal({
			 		title: '提示',
			 		content: response.message,
			 		showCancel: false
			 	})
			 }
			
		
		},
		async refresh(){
			 let self = this;
			uni.showModal({
				title: '重抽',
				content: '您将消化一张重抽卡进行重抽',
				success: async (res) => {
				  if (res.confirm) {
				  	let param = {
				  		blind_box_order_id:self.order_id
				  	};
				  	let response = await refreshBoxOrder(param); 
					if(!response.message){
						uni.showModal({
							title: '提示',
							content: '重抽成功',
							showCancel: false,
							success: async (res) => {
								this.loadBoxOrder();
								self.refreshBtnShow=false;
								this.$refs.refreshpopup.close()
							}
						})
						
					}else{
						uni.showModal({
							title: '提示',
							content: response.message,
							showCancel: false
						})
					}
				  	
				  	
				  } else if (res.cancel) {
				  	console.log('用户点击取消');
				  }
				}
				
			});
		
		},
		 onLoad(options){
		  		if(options.order_id){
		  			this.order_id = options.order_id;
		  			 this.loadBoxOrder();
					 
					/*  */
		  		}
		  		  
		  }
	}	  
}
</script>

<style lang="scss" scoped>

.status {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
	background: #F6F6F6;
}
.navigation{
	width: 100%;
	height: 100rpx;
	background: #F6F6F6;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left:0;
	top:0;
	z-index:999;
}
.navigation-position{
	height: 100rpx;
	background: rgba(0,0,0,0);
}
.back{
	display: block;
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	top: 26rpx;
	left:32rpx;
}
.navigation-title{
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
}
.order-content{
	width:612rpx;
	margin:0 auto;
	text-align:center;
	.gx-en{
		font-size:40rpx;
		color:#333;
		margin-top:16rpx;
	}
	.gx-cn{
		margin-top:6rpx;
		font-size:40rpx;
		color:#333;
		
		
	}
	.order-image{
		width:568rpx;
		height:568rpx;
		margin-top:30rpx;
		border:22rpx solid #7859A2;
		border-radius:10rpx;
		position:relative;
		.cover{
			width:98rpx;
			height:192rpx;
			position:absolute;
			top:-22rpx;
			left:-20rpx;
		}
		.level-name{
			font-size:40rpx;
			color:#fff;
			width:40rpx;
			height:192rpx;
			position:absolute;
			top:0rpx;
			left:10rpx;
			font-weight:600;
		}
		.product_cover{
			width:424rpx;
			height:418rpx;
			margin:72rpx auto 0rpx;		
		}
	}
	.product_price{
		
		font-size:48rpx;
		margin-top:30rpx;
		color:#333;
		font-weight:600;
	}
	.product_title{
		font-size:30rpx;
		margin-top:6rpx;
		color:#333;
		font-weight:600;
		width:462rpx;
		margin:6rpx auto 0;
		
	}
	.level-btn{
		margin-top:40rpx;
		overflow: hidden;
		position: relative;
		height:150rpx;
		.refresh-btn{
			width:280rpx;
			height:76rpx;
			border:2rpx solid #999;
			color:#fff;
			font-size:30rpx;
			line-height:76rpx;
			text-align: center;
			background:#999;
			float:left;
		}
		.refresh-btn-show{
			width:280rpx;
			height:76rpx;
			border:2rpx solid #D84C29;
			color:#fff;
			font-size:30rpx;
			line-height:76rpx;
			text-align: center;
			background:#D84C29;
			float:left;
		}
		.confirm-btn{
			width:280rpx;
			height:76rpx;
			border:2rpx solid #999;
			color:#999;
			font-size:30rpx;
			line-height:76rpx;
			text-align: center;
			float:left;
			margin-left:48rpx;
			
		}
		.djs-btn{
			width:280rpx;
			height:76rpx;
			color:#999;
			font-size:30rpx;
			line-height:76rpx;
			text-align: center;
			position:absolute;
			top:76rpx;
			left:0
		}
	}
	.refresh-explain{
		display:flex;
		.refresh-explain-item{
			margin:0 auto;
			>image{
				width:28rpx;
				height:28rpx;
				float:left;
				padding-top:4rpx;
			}
			>view{
				height:28rpx;
				font-size:28rpx;
				color:#333;
				float:left;
				margin-left:6rpx;
				
			}
		}
		
		
	}
	

	
}
	.pppup-content{
		text-align: center;
		width:604rpx;
		height:476rpx;
		border-radius: 10rpx;;
		color:#333;
		background:#fff;
		display: block;
		.refresh-top{
			padding-top:28rpx;
			font-weight:600;
			font-size:32rpx;
			
		}
		.refresh-popup-desc{
			
			font-size:32rpx;
			margin:68rpx auto 0rpx;
			width:462rpx;
		}
		.refresh-submit{
			margin:64rpx auto 0rpx;
			.refresh-submit-button{
				font-size:30rpx;
				width:370rpx;
				height:76rpx;
				line-height:76rpx;
				background: #D84C29;
				color:#fff;
				margin:0 auto;
				
			}
			.refresh-submit-desc-button{
				font-size:30rpx;
				width:370rpx;
				height:76rpx;
				line-height:76rpx;
				background: #999;
				color:#fff;
				margin:0 auto;
			}
			
			
			
			
		}
		.refresh-bottom{
			font-size: 28rpx;
			margin-top:36rpx;
		}
	}

</style>